import React, { Component } from 'react'
import {CSSTransition} from 'react-transition-group'
import  * as actionCreator from './store/actionCreator'
import * as loginCreator  from '../../page/login/store/actionCreator'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  NavSearchWrap,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem,
  SearchInfoList
} from './style';

class Header extends Component {
  getListArea(show){
    const {page,list,focused,mouseIn,handleMouseEnter,handleMouseLevea,handleChangePage,totalPage} = this.props;
    const pageList = []
    const newList = list.toJS()
    for(let i = (page-1)*10; i<page*10;i++){
      if(newList[i]){
        pageList.push(
          <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
        )
      }
    }
    if(mouseIn || focused){
      return (
        <SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLevea}>
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
              <i ref={(icon)=>{this.spinIcon = icon}} className="iconfont icon-Aa spin"></i>换一换
            </SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {
              pageList
            }
            
          </SearchInfoList>
        </SearchInfo>
      )
    }else{
      return null;
    }
  }
  render() {
    const {focused,hanldFocus,hanldBlur,list, login, loginout} = this.props
    return (
      <HeaderWrapper>
        <Logo ></Logo>
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载App</NavItem>
          {
            login ?  <NavItem className="right" onClick={loginout}>退出</NavItem> : 
                      <Link to='/login'>
                        <NavItem className="right">登录</NavItem>
                      </Link>
          }
          
          <NavItem className="right">
            <i className="iconfont icon-Aa"></i>
          </NavItem>
          <NavSearchWrap>
            <CSSTransition in={focused} classNames="slide" timeout={200}>
              <NavSearch 
                className={focused ? 'focused' : ''} 
                onFocus={()=> hanldFocus(list)}
                onBlur={hanldBlur}
              ></NavSearch>
            </CSSTransition>
            <i className="iconfont zoom icon-fangdajing"></i>
            {this.getListArea()}
          </NavSearchWrap>
          

        </Nav>
        <Addition>
          <Button className="write"><i className="iconfont icon-pen"></i>写文章</Button>
          <Button className="reg">注册</Button>
        </Addition>  
      </HeaderWrapper>
    )
  }
}

const mapStateToprops = (state) => {
  return {
    focused: state.getIn(['header', 'focused']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage']),
    login: state.getIn(['login', 'login'])
  }
}

const mapDispathToprops = (dispatch) => {
  return {
    hanldFocus(list){
      const action = actionCreator.searchFocus();
      dispatch(action)
      list.size===0 && dispatch(actionCreator.getList())
      
    },
    hanldBlur(){
      const action = actionCreator.searchBlur();
      dispatch(action)
    },
    handleMouseEnter(){
      dispatch(actionCreator.mouseEnter())
    },
    handleMouseLevea(){
      dispatch(actionCreator.mouseLevea())
    },
    handleChangePage(page, totalPage,spinIcon){
      let originAngle = spinIcon.style.transform.replace(/[^0-9]/ig, '')
      originAngle = originAngle ? + originAngle : 0
      spinIcon.style.transform = 'rotate('+(originAngle+360)+'deg)'
      if(page < totalPage){
        dispatch(actionCreator.changePage(page + 1))
      }else{
        dispatch(actionCreator.changePage(1))
      }
      
    },
    loginout(){
      dispatch(loginCreator.loginout())
    }
  }
}
export default connect(mapStateToprops,mapDispathToprops)(Header)